<template>
  <div v-loading="loading">
    <table class="table table-bordered mb-1 mt-3" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td colspan="10" class="font-weight-bold" data-font-bold="true">经营主体</td>
        </tr>
        <tr>
          <td width="10%">主体名称</td>
          <td class="report-input-td" colspan="2" width="22%">
            <span v-if="isViewMode">{{ latestRelatedView.customer_name }}</span>
            <el-input
              v-else
              v-model="latestRelatedView.customer_name"
              @blur="saveData('customer_name', 'latestRelatedView')"
              placeholder="输入主体名称"
            ></el-input>
          </td>
          <td width="10%">详细地址</td>
          <td class="report-input-td" colspan="6" width="28%">
            <span v-if="isViewMode">{{ latestRelatedView.address }}</span>
            <div v-else class="d-flex">
              <select-address
                v-model="latestRelatedView.address_code"
                @change="saveData('address_code', 'latestRelatedView')"
                :placeholder="addressHolder"
                :auto-top="true"
                class="w-50"
                ref="address"
              ></select-address>
              <el-input
                v-model="latestRelatedView.address_detail"
                @blur="saveData('address_detail', 'latestRelatedView')"
                class="w-50"
                placeholder="输入详情地址"
              ></el-input>
            </div>
          </td>
        </tr>
        <tr>
          <td width="10%">组织类型</td>
          <td colspan="2" width="18%" class="report-input-td">
            <span v-if="isViewMode">{{ enumCompanyType[latestRelatedView.org_class] }}</span>
            <c-select
              v-else
              @change="saveData('org_class', 'latestRelatedView')"
              v-model="latestRelatedView.org_class"
              :options="enumCompanyType"
            ></c-select>
          </td>
          <td width="10%">营业执照号码</td>
          <td class="report-input-td" width="34%" colspan="3">
            <a v-if="isViewMode" href="http://www.gsxt.gov.cn/index.html">
              {{ latestRelatedView.register_no }}
            </a>
            <el-input
              v-else
              @blur="saveData('register_no', 'latestRelatedView')"
              v-model="latestRelatedView.register_no"
              placeholder="输入营业执照号码"
            ></el-input>
          </td>
          <td width="10%">经营年限</td>
          <td class="report-input-td" width="18%" colspan="2">
            <span v-if="isViewMode">{{ latestRelatedView.bussiness_years || '-' }} 年</span>
            <el-input
              v-else
              v-model="latestRelatedView.bussiness_years"
              @blur="saveData('bussiness_years', 'latestRelatedView')"
              class="text-center"
              placeholder="输入经营年限"
              v-input-number="{ min: 0, fixed: 0 }"
            >
              <span slot="append">年</span>
            </el-input>
          </td>
        </tr>
        <tr>
          <td>用工人数</td>
          <td class="report-input-td">
            <div class="d-flex align-items-center">
              <span class="pl-1">固：</span>
              <span v-if="isViewMode">{{ latestRelatedView.emp_total || '-' }}</span>
              <el-input
                v-else
                v-model="latestRelatedView.emp_total"
                @blur="saveData('emp_total', 'latestRelatedView')"
                placeholder="固定工"
                v-input-number="{ min: 0, fixed: 0 }"
              ></el-input>
            </div>
          </td>
          <td class="report-input-td">
            <div class="d-flex align-items-center">
              <span class="pl-1">临：</span>
              <span v-if="isViewMode">{{ latestRelatedView.emp_temp_total || '-' }}</span>
              <el-input
                v-else
                v-model="latestRelatedView.emp_temp_total"
                @blur="saveData('emp_temp_total', 'latestRelatedView')"
                placeholder="临时工"
                v-input-number="{ min: 0, fixed: 0 }"
              ></el-input>
            </div>
          </td>
          <td class="text-left">近一年人工支出（万元）</td>
          <td class="report-input-td" colspan="3">
            <span v-if="isViewMode">{{ latestRelatedView.year_emp_exp || '-' }} 万元</span>
            <el-input
              v-else
              v-model="latestRelatedView.year_emp_exp"
              @blur="saveData('year_emp_exp', 'latestRelatedView')"
              placeholder="输入近一年人工支出"
              v-input-number="{ min: 0, fixed: 2 }"
            ></el-input>
          </td>
          <td>带动贫困户数</td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">
              {{
                +latestRelatedView.poverty_households > 0
                  ? latestRelatedView.poverty_households
                  : '-'
              }}
            </span>
            <el-input
              v-else
              v-model="latestRelatedView.poverty_households"
              @blur="saveData('poverty_households', 'latestRelatedView')"
              placeholder="输入带动贫困户数"
              type="number"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>经营者姓名</td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ shareholderCorp.real_name }}</span>
            <el-input
              v-else
              v-model="shareholderCorp.real_name"
              @blur="saveData('real_name', 'shareholderCorp')"
              placeholder="输入姓名"
            ></el-input>
          </td>
          <td>身份证号</td>
          <td class="report-input-td" colspan="3">
            <span v-if="isViewMode">{{ shareholderCorp.id_card }}</span>
            <el-input
              v-else
              v-model="shareholderCorp.id_card"
              @blur="saveData('id_card', 'shareholderCorp')"
              placeholder="输入身份证号"
            ></el-input>
          </td>
          <td>联系电话</td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ shareholderCorp.mobile_no }}</span>
            <el-input
              v-else
              v-model="shareholderCorp.mobile_no"
              @blur="saveData('mobile_no', 'shareholderCorp')"
              placeholder="输入联系电话"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>所在地区</td>
          <td class="report-input-td" colspan="6">
            <span v-if="isViewMode">{{ shareholderCorp.address }}</span>
            <div v-else class="d-flex">
              <select-address
                v-model="shareholderCorp.address_code"
                @change="saveData('address_code', 'shareholderCorp')"
                class="w-50"
                ref="address"
              ></select-address>
              <el-input
                v-model="shareholderCorp.address_detail"
                @blur="saveData('address_detail', 'shareholderCorp')"
                class="w-50"
                placeholder="输入详情地址"
              ></el-input>
            </div>
          </td>
          <td>婚姻状况</td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ enumshowMarrType[shareholderCorp.marriage_status] }}</span>
            <c-select
              v-else
              v-model="shareholderCorp.marriage_status"
              @change="saveData('marriage_status', 'shareholderCorp')"
              class="w-100"
              :options="enumMarrType"
            ></c-select>
          </td>
        </tr>
        <tr>
          <td>经营范围</td>
          <td class="report-input-td" colspan="9">
            <span v-if="isViewMode">{{ latestRelatedView.business_scope }}</span>
            <el-input
              v-else
              v-model="latestRelatedView.business_scope"
              @blur="saveData('business_scope', 'latestRelatedView')"
              placeholder="经营范围"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table table-bordered mb-1 mt-3" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">信贷八有指标</td>
        </tr>
        <tr>
          <td class="report-input-td" :class="isViewMode ? 'td-text-left' : ''" colspan="10">
            <div class="p-2">
              <span v-if="isViewMode">{{ creditTypeStr || '-' }}</span>
              <div class="d-flex" v-else>
                <el-checkbox-group v-model="creditTypeList" @change="selectCreditType">
                  <el-checkbox v-for="(type, key) in enumLoadProduct" :key="key" :label="key">
                    {{ type }}
                  </el-checkbox>
                </el-checkbox-group>
                <el-checkbox v-model="checked" @change="selectAllCreditType" class="mx-3">
                  全选
                </el-checkbox>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table table-bordered mt-3 mb-1" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">资金需求</td>
        </tr>
        <tr>
          <td colspan="2" width="20%">申请金额(万元)</td>
          <td colspan="2" width="18%">贷款年限</td>
          <td colspan="2" width="20%">建议金额(万元)</td>
          <td colspan="2" width="20%">批复金额(万元)</td>
          <td colspan="2" width="22%">主要用途</td>
        </tr>
        <tr>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ latestRelatedView.apply_funds || '-' }}</span>
            <el-input
              v-else
              v-model="latestRelatedView.apply_funds"
              @blur="saveData('apply_funds', 'latestRelatedView')"
              placeholder="输入金需求金额"
              type="number"
            ></el-input>
          </td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ latestRelatedView.load_years || '-' }}</span>
            <el-input
              v-model="latestRelatedView.load_years"
              v-else
              @blur="saveData('load_years', 'latestRelatedView')"
              placeholder="输入贷款年限"
              type="number"
            ></el-input>
          </td>
          <td colspan="2">
            {{ latestRelatedView.approved_funds || '-' }}
          </td>
          <td colspan="2">
            <span>{{ latestRelatedView.res_funds || '-' }}</span>
          </td>
          <td class="report-input-td" colspan="2">
            <div v-if="isViewMode" class="p-1">{{ latestRelatedView.funds_use_dir || '-' }}</div>
            <el-input
              v-else
              @blur="saveData('funds_use_dir', 'latestRelatedView')"
              v-model="latestRelatedView.funds_use_dir"
              placeholder="输入主要用途"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="table table-bordered mt-3 mb-1">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">项目类型</td>
        </tr>
        <tr>
          <td width="50%" colspan="5">类型</td>
          <td width="50%" colspan="5">类型名称</td>
        </tr>
        <tr>
          <td colspan="5">产业包</td>
          <td colspan="5">
            <span v-if="+related.project_type === 1">-</span>
            <span>{{ related.project_type_name }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
// import SelectFarmOrg from '@/components/select/SelectFarmOrg'
// import { getResultData } from '@/gov/components/creditFile/index'
// import { putFarm } from '@/common/api/industrial'
import { enumshowMarrType, enumMarrType, enumLoadProduct } from '@/credit/plugins/enum'
import { enumCompanyType } from '@/gov/plugins/enum'
import { licenseValidate } from '@vimi/utils-tool'
export default {
  components: {
    SelectAddress,
    // SelectFarmOrg
  },
  props: {
    queryId: {
      type: String,
      default: '',
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    related: {
      type: Object,
      default: () => {},
    },
    orgCorp: {
      type: Object,
      default: () => {},
    },
    tableName: {
      type: String,
      default: 'project_white_list',
    },
    mirrorKey: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumLoadProduct,
      enumMarrType,
      enumCompanyType,
      enumshowMarrType,
      // customerEmp: {},
      initCustomerEmp: {},
      latestRelatedView: {},
      shareholderCorp: {},
      loading: false,
      creditTypeList: [],
      checked: false,
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
    creditTypeStr() {
      let res = []
      this.creditTypeList.forEach(key => {
        res.push(this.enumLoadProduct[key])
      })
      return res.join('，')
    },
    addressHolder() {
      const reg = new RegExp(this.latestRelatedView.address_detail || '')
      return (
        (this.latestRelatedView.address || '').replace(reg, '') ||
        this.latestRelatedView.address ||
        '请选择地址'
      )
    },
  },
  watch: {
    related: {
      handler: function () {
        this.latestRelatedView = { ...this.related }
        const typeList = this.related.credit_type_list
        this.creditTypeList = typeList ? typeList.split(',') : []
        this.checked = +this.creditTypeList.length === 8
      },
      immediate: true,
    },
    orgCorp: {
      handler: function () {
        this.shareholderCorp = { ...this.orgCorp }
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    selectCreditType() {
      this.latestRelatedView.credit_type_list = this.creditTypeList.join(',')
      this.saveData('credit_type_list', 'latestRelatedView')
    },
    selectAllCreditType(val) {
      this.creditTypeList = val ? Object.keys(this.enumLoadProduct) : []
      this.latestRelatedView.credit_type_list = this.creditTypeList.join(',')
      this.saveData('credit_type_list', 'latestRelatedView')
    },
    saveData(key, obj) {
      if (key === 'register_no') {
        if (!this.latestRelatedView.register_no) {
          return this.$message.error('请输入营业执照号码')
        }
        if (!licenseValidate(this.latestRelatedView.register_no)) {
          return this.$message.error('营业执照格式有误，请重新输入')
        }
      }
      const data = {}
      if (obj === 'latestRelatedView' && this.related[key] !== this.latestRelatedView[key]) {
        const mKey = this.mirrorKey[key] || key
        data[mKey] = this.latestRelatedView[key]
        this.submitFarm(data)
      }
      if (obj === 'shareholderCorp' && this.orgCorp[key] !== this.shareholderCorp[key]) {
        data[key] = this.shareholderCorp[key]
        data.real_name = this.shareholderCorp.real_name
        data.id_card = this.shareholderCorp.id_card
        data.mobile_no = this.shareholderCorp.mobile_no
        data.customer_related_id = this.queryId
        data.is_corp = 1
        this.submitShareHolder(data)
      }
    },
    submitFarm(data) {
      this.$api
        .updateData(this.$serviceName, this.tableName, this.queryId, data)
        .catch(err => {
          this.$message.error(`修改主体信息失败${err}`)
        })
        .finally(() => {
          this.$emit('save', true)
        })
    },
    submitShareHolder(data) {
      if (!this.orgCorp.datum_customer_shareholder_id) {
        return
      }
      this.$api
        .updateData(
          this.$serviceName,
          'datum_customer_shareholder',
          this.orgCorp.datum_customer_shareholder_id,
          data
        )
        .catch(err => {
          this.$message.error(`修改股东信息失败${err}`)
        })
        .finally(() => {
          this.$emit('save', false)
        })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
